<template>
  <section class="section-filter">
    <a-form
      :model="params"
      class="filter-form"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="订单号">
        <a-input v-model:value="params.orderNo" allow-clear />
      </a-form-item>
      <a-form-item label="售后编号">
        <a-input v-model:value="params.afterSaleNo" allow-clear />
      </a-form-item>
      <a-form-item label="商品名称">
        <a-input v-model:value="params.productName" allow-clear />
      </a-form-item>
      <a-form-item label="退款类型">
        <a-select v-model:value="params.refundType">
          <a-select-option v-for="item in typeOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="售后状态">
        <a-select v-model:value="params.status">
          <a-select-option v-for="item in statusOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="客服介入">
        <a-select v-model:value="params.interveneStatus">
          <a-select-option
            v-for="item in interveneStatusOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="售后方式">
        <a-select v-model:value="params.manner">
          <a-select-option v-for="item in mannerOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="申请时间">
        <a-row style="min-width: 280px">
          <a-col :span="11">
            <a-date-picker
              v-model:value="startDate"
              :disabled-date="checkStartDate"
              format="YYYY-MM-DD"
              placeholder="订单起始时间"
            />
          </a-col>
          <a-col :span="2" style="text-align: center"> ~ </a-col>
          <a-col :span="11">
            <a-date-picker
              v-model:value="endDate"
              :disabled-date="checkEndDate"
              format="YYYY-MM-DD"
              placeholder="订单结束时间"
            />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
    <div class="button-box">
      <a-button type="primary" @click="searchData">筛选</a-button>
      <a-button @click="resetData">重置</a-button>
      <a-button @click="clickExportBtn">批量导出</a-button>
      <a-button>查看已生成报表</a-button>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, inject, ref, watch, createVNode, reactive, toRefs } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { AfterSaleParams } from '@/model/order/AfterSale'
import { downloadFile } from '@/utils/download'
import { Api } from '@/api/order/order'
import { Modal } from 'ant-design-vue'
import { Dayjs } from 'dayjs'
import { option1, option2, option3, option4, filterKeys } from './tableConfig'
import { filterParams } from '@/utils/formMethod'

export default defineComponent({
  emits: ['searchTable'],
  setup(props, { emit }) {
    const params: AfterSaleParams = inject('params')!
    const state = reactive({
      typeOptions: [...option1], // 退款类型选项
      statusOptions: [...option2], // 售后状态选项
      interveneStatusOptions: [...option3], // 客服介入选项
      mannerOptions: [...option4], // 售后方式选项
    })
    // 定义两个时间选择器变量
    const startDate = ref<Dayjs | undefined>()
    const endDate = ref<Dayjs>()
    watch(startDate, () => {
      params.createStart = startDate.value?.format('YYYY-MM-DD')
    })
    watch(endDate, () => {
      params.createEnd = endDate.value?.format('YYYY-MM-DD')
    })
    // 时间校验规则
    const checkStartDate = (startDate: Dayjs) => {
      if (!startDate || !endDate.value) {
        return false
      }
      return startDate.valueOf() > endDate.value.valueOf()
    }
    const checkEndDate = (endDate: Dayjs) => {
      if (!endDate || !startDate.value) {
        return false
      }
      return startDate.value.valueOf() >= endDate.valueOf()
    }
    // 筛选按钮
    const searchData = () => {
      emit('searchTable')
    }
    // 重置按钮
    const resetData = () => {
      params.refundType = 0
      params.status = 0
      params.interveneStatus = 0
      params.manner = 0
      params.orderNo = ''
      params.afterSaleNo = ''
      params.productName = ''
      params.createStart = undefined
      params.createEnd = undefined
      startDate.value = undefined
      endDate.value = undefined
      emit('searchTable')
    }
    // 导出文件
    const clickExportBtn = () => {
      Modal.confirm({
        title: '提醒',
        icon: createVNode(ExclamationCircleOutlined),
        content: '是否导出当前售后报表？',
        onOk() {
          const apiUrl = Api.AFTER_SALE_EXPORT
          const exportParams = filterParams(filterKeys, params)
          downloadFile(apiUrl, exportParams)
        },
        onCancel() {},
      })
    }
    return {
      params,
      startDate,
      endDate,
      ...toRefs(state),
      clickExportBtn,
      searchData,
      resetData,
      checkStartDate,
      checkEndDate,
    }
  },
})
</script>

<style lang="scss" scoped>
.section-filter {
  background-color: #f3f3f3;
  border: 1px solid #e7e7e7;
  padding: 10px;

  .filter-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .ant-form-item {
      width: 33%;
      max-width: 450px;
      padding: 0 20px;
    }
  }

  .button-box {
    display: inline-block;
    margin-left: 40px;

    .ant-btn {
      margin: 10px 5px;
    }
  }
}
</style>
